<template>
	<view class="x-navbar">
		<view class="x-navbar-placeholder"></view>
		<view class="x-navbar-fixed">
			<view
				class="x-navbar-status-bar"
				:style="{
					backgroundColor: bgColor
				}"
				v-if="safeAreaInsetTop"
			></view>
			<view
				class="x-navbar-content"
				:style="{
					height: $u.addUnit(height),
					backgroundColor: bgColor
				}"
			>
				<view class="x-navbar-content-left" @click="leftClick"><u-icon v-if="leftIcon" :name="leftIcon" :size="leftIconSize" :color="leftIconColor"></u-icon></view>
				<view class="x-navbar-content-center" @@click="titleClick">
					<text
						class="u-line-1 x-navbar-content-center-title"
						:style="[
							{
								width: $u.addUnit(titleWidth)
							},
							$u.addStyle(titleStyle)
						]"
					>
						{{ title }}
					</text>
				</view>
				<view class="x-navbar-content-right" @@click="rightClick">
					<slot v-if="!rightIcon&&!rightText&&!rightImage" name="navbarRight"></slot>
					<u-icon v-if="rightIcon" :name="rightIcon" size="20"></u-icon>
					<text v-if="rightText" class="x-navbar-content-right-text">{{ rightText }}</text>
					<image v-if="rightImage" :src="rightImage" mode="aspectFill" class="x-navbar-content-right-image"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'x-navbar',
	data() {
		return {};
	},
	props: {
		// 是否开启顶部安全区适配
		safeAreaInsetTop: {
			type: Boolean,
			default: true
		},
		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
		placeholder: {
			type: Boolean,
			default: false
		},
		// 是否固定在顶部
		fixed: {
			type: Boolean,
			default: true
		},
		// 是否显示下边框
		border: {
			type: Boolean,
			default: false
		},
		// 左边的图标
		leftIcon: {
			type: String,
			default: 'arrow-left'
		},
		// 左边的提示文字
		leftText: {
			type: String,
			default: ''
		},
		// 左右的提示文字
		rightText: {
			type: String,
			default: ''
		},
		// 右边的图标
		rightIcon: {
			type: String,
			default: ''
		},
		// 右边的自定义图像
		rightImage: {
			type: String,
			default: ''
		},
		// 标题
		title: {
			type: [String, Number],
			default: ''
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		// 标题的宽度
		titleWidth: {
			type: [String, Number],
			default: '400rpx'
		},
		// 导航栏高度
		height: {
			type: [String, Number],
			default: '44px'
		},
		// 左侧返回图标的大小
		leftIconSize: {
			type: [String, Number],
			default: 20
		},
		// 左侧返回图标的颜色
		leftIconColor: {
			type: String,
			default: '#303133'
		},
		// 点击左侧区域(返回图标)，是否自动返回上一页
		autoBack: {
			type: Boolean,
			default: false
		},
		// 标题的样式，对象或字符串
		titleStyle: {
			type: [String, Object],
			default: ''
		}
	},
	methods: {
		// 点击左侧区域
		leftClick() {
			// 如果配置了autoBack，自动返回上一页
			this.$emit('leftClick');
			uni.$emit('leftClick');
			if (this.autoBack) {
				uni.navigateBack();
			}
		},
		titleClick(){
			uni.$emit('titleClick');
		},
		rightClick() {
			this.$emit('rightClick');
		}
	}
};
</script>

<style lang="scss">
.x-navbar {
	.x-navbar-placeholder {
		height: calc(32px + 44px);
	}
	.x-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 11;
	}
	.x-navbar-status-bar {
		height: 32px;
	}
	.x-navbar-content {
		@include flex(row);
		align-items: center;
		height: 44px;
		background-color: #9acafc;
		position: relative;
		justify-content: center;
		.x-navbar-content-left {
			padding: 0 25px 0 13px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			@include flex(row);
			align-items: center;
		}
		.x-navbar-content-center {
			// background-color: #9acafc;
			.x-navbar-content-center-title {
				text-align: center;
				font-size: 16px;
				color: $u-main-color;
			}
		}
		.x-navbar-content-right {
			color: #2469f2;
			padding: 0 13px;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			@include flex(row);
			align-items: center;
			.x-navbar-content-right-text {
				font-size: 15px;
				margin-left: 3px;
			}
			.x-navbar-content-right-image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>
